import React, { Component } from 'react';

import SelectField from 'material-ui/SelectField';
import MenuItem from 'material-ui/MenuItem';
import {Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn} from 'material-ui/Table';
import RaisedButton from 'material-ui/RaisedButton';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import TextField from 'material-ui/TextField';

import store from '../../stores/main';
import { getBuySecretInfoAPI, getBuySecretInfoByParamsAPI, getHotelListBySearchKey } from '../../services/API';
import R from 'ramda';
import async from 'async';

import Waiting from '../Waiting';
import Alert from '../Alert';

export default class BuySecretNo extends Component {

    componentWillMount() {
      async.series({
        secrets: (next) => {
          this.setState(store.dispatch({type:'OPEN_WAITING'}));
          getBuySecretInfoAPI((res, err) => {
            if (err) {
              this.setState(store.dispatch({type:'OPEN_ALERT', re:err}));
            } else {
              if (res.statusNo == 200) {
                this.setState(store.dispatch({type:'GET_BUY_SECRET', data: res.data}));
                this.setState(store.dispatch({type: 'SET_HOTEL_ID', data: ' '}));
                this.setState({sta: ' '});
                next(null);
              } else {
                this.setState(store.dispatch({type:'OPEN_ALERT', re: res.msg}));
              }
            }
          });
        },

        hotels: (next) => {
          this.setState(store.dispatch({type:'OPEN_WAITING'}));
          getHotelListBySearchKey({
            searchKey: ''
          },(res, err) => {
            if (err) {
              this.setState(store.dispatch({type:'OPEN_ALERT', re: err}));
            } else {
              if (res.statusNo == 200) {
                this.setState(store.dispatch({type: 'GET_HOTEL_LIST', data: res.data}));
                next(null);
              } else {
                this.setState(store.dispatch({type:'OPEN_ALERT', re: res.msg}));
              }
            }
          });
        }
      })

    }

    constructor(props) {
        super(props);
        this.state = {
          sta: 'T',
          openDialog: false,
          defaultKey: ''
        }
    }

    openDialog () {
      this.setState(store.dispatch({type:'OPEN_WAITING'}));
      getHotelListBySearchKey({
        searchKey: this.state.defaultKey
      },(res, err) => {
        if (err) {
          this.setState(store.dispatch({type:'OPEN_ALERT', re: err}));
        } else {
          if (res.statusNo == 200) {
            if(res.data.hotelInfoList.length == 1) {
              this.getSecretInfo();
            } else {
              this.setState({openDialog: true});
            }
            this.setState(store.dispatch({type: 'GET_HOTEL_LIST', data: res.data}));
            this.setState(store.dispatch({type: 'SET_HOTEL_ID', data: res.data.hotelInfoList[0].hotelId}));
          } else {
            this.setState(store.dispatch({type:'OPEN_ALERT', re: res.msg}));
          }
        }
      });
    }

    changeHotelName (e, value) {
      this.setState({defaultKey: value});
    }

    changeHotel (e, index, value) {
      this.setState(store.dispatch({type: 'SET_HOTEL_ID', data: value}));
    }

    changeSta (e, index, value) {
      this.setState({sta: value});
    }

    getSecretInfo () {
      var state = store.getState();
      this.setState(store.dispatch({type:'OPEN_WAITING'}));
      getBuySecretInfoByParamsAPI({
        pageNo: state.pageNo,
        status: this.state.sta,
        hotelId: state.hotelId
      } ,(res, err) => {
        if (err) {
          this.setState(store.dispatch({type:'OPEN_ALERT', re:err}));
        } else {
          if (res.statusNo == 200) {
            this.setState(store.dispatch({type:'GET_BUY_SECRET', data: res.data}));
            this.setState({openDialog: false});
          } else {
            this.setState(store.dispatch({type:'OPEN_ALERT', re: res.msg}));
          }
        }
      })
    }

    closeDialog () {
      this.setState({openDialog: false});
    }

    getSecretInfoByPage(pageNo, e) {
      this.setState(store.dispatch({type:'SET_PAGE_NO', data: pageNo}));
      this.getSecretInfo();
    }

    render() {
        const pageBtnStyle = {
          marginRight: 20,
          width: 45,
          minWidth: 45
        };

        const pageStyle = {
          textAlign: 'center',
          position: 'fixed',
          bottom: 50
        };

        var state = store.getState();
        var buySecretInfo = R.defaultTo([])(state.buySecretInfo);
        var pages = R.defaultTo([])(state.pages);
        var hotelMap = R.defaultTo([])(state.hotelMap);

        const actions = [

          <RaisedButton
            label="确认"
            primary={true}
            onTouchTap={this.getSecretInfo.bind(this)}
            style={{marginRight: 20}}
            />,
          <FlatButton
            label="取消"
            primary={true}
            onTouchTap={this.closeDialog.bind(this)}
            />
        ];
        return (
            <div>
                <div>
                    <TextField floatingLabelText="酒店关键字" value={this.state.defaultKey}  hintText="酒店关键字" style={{position: 'relative', top: '-15px'}} onChange={this.changeHotelName.bind(this)}/>
                    <SelectField
                        floatingLabelText="请选择发送状态"
                        value={this.state.sta}
                        onChange={this.changeSta.bind(this)}
                        style={{marginLeft: 50}}
                        >
                        <MenuItem value=" " primaryText="无" />
                        <MenuItem value="T" primaryText="发送成功" />
                        <MenuItem value="F" primaryText="发送失败" />
                    </SelectField>
                    <RaisedButton onTouchTap={this.openDialog.bind(this)} label="查询" primary={true} style={{position: 'absolute', margin: '30px 0 0 50px'}}/>
                </div>
                <Table>
                    <TableHeader displaySelectAll={false} adjustForCheckbox={false}>
                        <TableRow>
                            <TableHeaderColumn>序列号</TableHeaderColumn>
                            <TableHeaderColumn>本地订单号</TableHeaderColumn>
                            <TableHeaderColumn>发送状态</TableHeaderColumn>
                            <TableHeaderColumn>购买用户</TableHeaderColumn>
                            <TableHeaderColumn>创建时间</TableHeaderColumn>
                        </TableRow>
                    </TableHeader>
                    <TableBody displayRowCheckbox={false} showRowHover={true}>
                      {
                        buySecretInfo.map((val, ind) => {
                          return (
                            <TableRow key={ind}>
                              <TableRowColumn>{val.secretNo}</TableRowColumn>
                              <TableRowColumn>{val.storeOrderNo}</TableRowColumn>
                              <TableRowColumn>{val.status}</TableRowColumn>
                              <TableRowColumn>{val.userName}</TableRowColumn>
                              <TableRowColumn>{val.createTime}</TableRowColumn>
                            </TableRow>
                          )
                        })
                      }

                    </TableBody>
                </Table>
              <div style={pageStyle}>
                {
                  pages.map((val, ind)=>{
                    if(val == state.pageNo){
                      return (
                        <RaisedButton key={ind} label={val} primary={true} style={pageBtnStyle}/>
                      )
                    }else {
                      return (
                        <FlatButton key={ind} label={val} primary={true} style={pageBtnStyle} onTouchTap={this.getSecretInfoByPage.bind(this, val)}/>
                      )
                    }
                  })
                }
              </div>
              <Dialog
                modal={false}
                open={this.state.openDialog}
                onRequsetClose={this.closeDialog.bind(this)}
                actions={actions}
                title="请选择酒店"
                >
                <SelectField
                  floatingLabelText="请选择酒店"
                  value={state.hotelId}
                  onChange={this.changeHotel.bind(this)}
                  >
                  {
                    hotelMap.map((val, ind) => (
                      <MenuItem value={val.hotelId} primaryText={val.hotelName} key={ind} />
                    ))
                  }
                </SelectField>
              </Dialog>
              <Waiting />
              <Alert />
            </div>
        )
    }
}
